import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  Platform,
  Linking,
  NativeModules,
  TouchableOpacity
} from 'react-native';

import Modal from "react-native-modal";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';
import StorageHelper from '../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../config/storage';

const scale = GLOBAL.SCALE;

export default class AppUpdatePage extends Component {
  constructor(props) {
    super(props);
  }

  goUpdate () {
    //关闭更新提示框
    if (Platform.OS === 'ios') {
      //前去safari下载
      Linking.openURL(this.props.versionInfo['url']);
    } else if (Platform.OS === 'android') {
      // 下载最新Apk  
      //NativeModules.upgrade.startUpgrade(this.props.versionInfo['url']);
      Linking.openURL(this.props.versionInfo['url']);
    }
  }

  async ignoreUpdate () {
    //忽略该版本
    await StorageHelper.set(STORAGE_CONSTANT.VERSION_IGNORE, {
      versionIgnoreCode: this.props.versionInfo['versionCode'] || 1,
      versionIgnoreTime: new Date()
    });
    //关闭更新提示框
    let { ignore } = this.props;
    if (ignore) ignore();
  }

  render () {
    let { versionInfo, isVisible } = this.props;
    return (
      <Modal isVisible={isVisible}
        animationIn={'bounceIn'}
        animationOut={'fadeOut'}
        useNativeDriver={true}
        style={styles.modal}
      >
        <View style={styles.updateContainer}>
          <Image source={require('../../imgs/global/updateIcon.png')} style={styles.updateIcon} />
          <Text style={styles.updateLabel}>版本更新</Text>
          <View style={styles.updateInfo}>
            <Text style={styles.updateVersion}>最新版本：{versionInfo['versionNo']}</Text>
            <Text style={styles.updateInfoDetail}>更新内容：</Text>
            <ScrollView style={styles.updateInfoBox}>
              {versionInfo['content'] && versionInfo['content'].map((item, index) => {
                return <Text key={index} style={styles.updateInfoItem}>{item}</Text>
              })}
            </ScrollView>
          </View>
          {versionInfo['upgradeWay'] == '1' ?
            <TouchableOpacity onPress={() => { this.goUpdate() }}>
              <Text style={styles.forcedUpdate}>升级到新版本</Text>
            </TouchableOpacity>
            : (<View style={styles.buttons}>
              <TouchableOpacity onPress={() => { this.ignoreUpdate() }}>
                <Text style={styles.cancle}>忽略</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => { this.goUpdate() }}>
                <Text style={styles.update}>更新</Text>
              </TouchableOpacity>

            </View>)
          }
        </View>

      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modal: {
    alignItems: 'center',
    margin: 0
  },
  updateContainer: {
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 261 * scale,
    borderRadius: 8 * scale,
  },
  updateIcon: {
    width: 103 * scale,
    height: 103 * scale,
    marginTop: 14 * scale,
    marginBottom: 12 * scale,
  },
  updateLabel: {
    color: style.color.themeColor,
    fontSize: 14 * scale
  },
  updateInfo: {
    width: '100%',
    marginTop: 16 * scale,
    paddingLeft: 25 * scale,
    paddingRight: 25 * scale,
    marginBottom: 17 * scale,
  },
  updateVersion: {
    marginBottom: 7 * scale,
    fontSize: 13 * scale
  },
  updateInfoDetail: {
    // marginBottom: 7 * scale,
    fontSize: 13 * scale
  },
  updateInfoItem: {
    marginBottom: 4 * scale,
    marginLeft: 4 * scale,
    fontSize: 12 * scale
  },
  buttons: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  cancle: {
    width: 130 * scale,
    paddingTop: 12 * scale,
    paddingBottom: 12 * scale,
    fontSize: 14 * scale,
    color: '#404040',
    textAlign: 'center',
    borderTopColor: style.color.border,
    borderTopWidth: 1
  },
  update: {
    width: 130 * scale,
    paddingTop: 12 * scale,
    paddingBottom: 12 * scale,
    color: style.color.themeColor,
    fontSize: 14 * scale,
    textAlign: 'center',
    borderLeftColor: style.color.border,
    borderLeftWidth: 1,
    borderTopColor: style.color.border,
    borderTopWidth: 1
  },
  forcedUpdate: {
    width: 233 * scale,
    height: 32 * scale,
    lineHeight: 32 * scale,
    backgroundColor: style.color.themeColor,
    borderRadius: 4 * scale,
    color: '#ffffff',
    fontSize: 14 * scale,
    textAlign: 'center',
    marginBottom: 17 * scale
  },
  updateInfoBox: {
    height: 92 * scale,
  }
});
